import React, {useState} from "react";
import "./index.scss";

const DATA = [1, 2, 3, 4, 5, 6]
export default function CSSTabs(props) {
  const {data = DATA, onChange, className = ''} = props;
  const handleChange = e => {
    const value =  e.target.value
    onChange && onChange(data[value])
  }
  return (
    <div className={`cssTabs ${className}`}>
      {data.map((d, i) => <input key={d} type="radio" id={`tab${i}`} name="tab-control" value={i} onChange={handleChange}/>)}
      <ul>
        {data.map((d, i) =>
          <li key={d} title={d}>
            <label htmlFor={`tab${i}`} role="button"><span>{d}</span></label>
          </li>
        )}
      </ul>

      <div className="slider">
        <div className="indicator"/>
      </div>
      <div className="content">
        {data.map((d, i) => <section key={d}>
          {d}
        </section>)}
      </div>
    </div>
  )
}
